<template>
	<view class="productDetail">
		<view class="back" @click="goBack" :style="{'top':menuButtonInfo.top+'px'}">
			<uni-icons class="icon" type="left" size="24" color="#ffffff"></uni-icons>
		</view>
		<view class="banner-box">
			<image v-if="form.labelImage" class="label-img" :src="form.labelImage" mode="widthFix"></image>
			<swiper v-if="imagelist.length" class="banner-wrapper" :indicator-dots="true" circular :autoplay="true"
				:interval="5000" :duration="1000">
				<swiper-item v-for="(item,index) in imagelist" :key="index" @click="openPic(index)">
					<image v-if="item.type === 0" class="banner" :src="item.url+'?imageView2/3/w/720/q/100'"
						mode="aspectFill"></image>
					<image v-else class="banner" @click.stop="openVideo(item.url)"
						:src="item.url + '?vframe/jpg/offset/1'" mode="aspectFill"></image>
					<image v-if="item.type === 1" @click.stop="openVideo(item.url)" src="../static/image/play.png"
						class="playImage" mode="widthFix"></image>
				</swiper-item>
			</swiper>
			<image v-else class="banner-wrapper"
				src="https://cdpresources.hobon.cc/supplier-mini-program/static/noProduct.png" mode="aspectFill">
			</image>
		</view>
		<view class="base-info-wrapper">
			<view class="price-wrapper">
				<view class="price">
					<text class="normal">￥</text>
					<text class="number">{{ form.examinePrice || form.sellingPrice || '--.--' }}</text>
					<text class="unit">/件</text>
				</view>
				<view class="inventory-wrapper">
					<view class="inventory">
						<text>库存</text>
						<text v-if="!form.sellingPrice">--</text>
						<text v-else class="volume">{{ form.supply - (form.sold || 0) }}</text>
						<text>件</text>
						<view class="line"></view>
						<text>近30天售</text>
						<text class="volume">{{ form.salesVolume || 0 }}</text>
						<text>件</text>
					</view>
					<view class="aftersale-volume">
						30天售后率：{{ form.afterSalesRate ? (parseFloat((form.afterSalesRate * 100).toFixed(2)) + '%'):'无' }}
					</view>
				</view>
			</view>
			<view class="product-title">
				<text selectable>{{ form.productName }}</text>
			</view>
			<view v-if="form.moq > 1 || form.loq || form.multiple > 1" class="moq-wrapper">
				<view v-if="form.multiple > 1" class="tag">
					倍数:{{ form.multiple }}
				</view>
				<view v-if="form.moq > 1" class="tag">
					起订:{{ form.moq }}
				</view>
				<view v-if="form.loq" class="tag">
					限购:{{ form.loq }}
				</view>
			</view>
			<view class="spec-wrapper">
				<view class="spec-item">
					<view class="item">
						<view class="label">
							毛重
						</view>
						<view class="value">
							约{{ form.grossWeight }}斤
						</view>
					</view>
					<view class="item">
						<view class="label">
							毛单价
						</view>
						<view class="value">
							约{{ (form.sellingPrice/form.grossWeight).toFixed(2) }}元/斤
						</view>
					</view>
				</view>
				<view class="spec-item">
					<view class="item">
						<view class="label">
							净重
						</view>
						<view class="value">
							约{{ form.netWeight }}斤
						</view>
					</view>
					<view class="item">
						<view class="label">
							净单价
						</view>
						<view class="value">
							约{{ (form.sellingPrice/form.netWeight).toFixed(2) }}元/斤
						</view>
					</view>
				</view>
			</view>
			<view class="label-wrapper" v-if="form.labelList && form.labelList.length">
				<view class="label-item" v-for="(item,index) in form.labelList" :key="index"
					:style="{'color':item.labelColor,'background-color':item.labelColor + '11','border-color': item.labelColor}">
					{{ item.labelName }}
				</view>
			</view>
		</view>
		<view class="module-wrapper">
			<view class="title-wrapper">
				<image class="icon"
					src="https://cdpresources.hobon.cc/procurement-mini-program/static/product-icon1.png" mode="">
				</image>
				<text class="title">售后须知</text>
			</view>
			<view class="afterSale-item tip">
				<!-- <view class="label">
					降价退差价 发货前商品降价，平台自动退差价
				</view>
				<view class="label" v-if="form.cityFlag">
					此商品如需售后，需在城市仓内称重发起售后
				</view> -->
				<view class="label">
					1、提货后24小时内可提交售后；
				</view>
				<view class="label">
					2、拍摄报损证据时请体现原包装和商品标码；
				</view>
				<view class="label">
					3、不同品类的商品请按品名单独拍摄并提交报损；
				</view>
				<view class="label">
					4、请将需要售后的商品部分集中平铺放在称重台上拍摄证据,并在上秤前或后体现秤清零情况；
				</view>
				<view class="label">
					5、任何形式(不够真实、不够分量、不够新鲜)的报损请在到仓24小时内提报完成；
				</view>
				<view class="label">
					6、无售后的商品不予报损；
				</view>
				<view class="label">
					7、拍摄报损证据时请使用水印相机拍摄，以便提升处理时效；
				</view>
				<view class="label">
					8、由于市场货源不稳,每日均可能出现缺货，提货时请清点数量，如果缺货请在提货现场反馈；如果提货单有商品但实际未收到，请及时联系仓里；
				</view>
				<view class="label">
					9、弄虚作假、恶意售后、陈货换新将永久关停账户，并赔偿平台相应损失；出现未在售后赔付范围内争议，以平台判断为准。
				</view>
				<view class="label">
					10、生鲜类属于特殊商品，一旦发货不支持退换货服务；如有坏果，请在24小时内不予处理。
				</view>
				<view class="label">
					11、因买家取货晚、个人原因保存不当、放置时间过长等原因导致生鲜商品腐烂变质，不在理赔范围内；不接受没图片、逾期、个人主观口感喜好、理赔标准:净重单价乘以损坏数量；
				</view>
				<view class="label">
					12、出仓前需要进行开箱验货。以榴莲、山竹、车子、蓝莓、草莓、西瓜、芒果、桃子类等高危水果到货后，需要仓内自行验货，出现质量问题根据商城售后说明及时水印相机拍视频。有问题请24小时内联系客服处理。尤其是榴莲、山竹、车子、蓝莓、草莓、西瓜、芒果、桃子类等高危水果到货后，需要仓内自行验货，出现质量问题根据商城售后说明及时水印相机拍视频。
				</view>
				<view class="label">
					13、降价退差价 发货前商品降价，平台自动退差价
				</view>
			</view>
			<view class="afterSale-item" v-if="form.supportAfterSales">
				<view class="label">
					以下情况，可申请售后：
				</view>
				<view class="misc">
					{{ form.supportAfterSales }}
				</view>
			</view>
			<view class="afterSale-item" v-if="form.nonsupportAfterSales">
				<view class="label">
					以下情况，不支持售后：
				</view>
				<view class="misc">
					{{ form.nonsupportAfterSales }}
				</view>
			</view>
		</view>
		<view class="module-wrapper">
			<view class="title-wrapper">
				<image class="icon"
					src="https://cdpresources.hobon.cc/procurement-mini-program/static/product-icon2.png" mode="">
				</image>
				<text class="title">商品属性</text>
			</view>
			<view class="attribute-item">
				<view class="label">
					采购员
				</view>
				<view class="misc">
					{{ form.buyerName || '-' }}
				</view>
			</view>
			<view class="attribute-item">
				<view class="label">
					品类
				</view>
				<view class="misc">
					<text>{{ form.categoryName }}/{{ form.categoryIiName }}</text>
					<text v-if="form.categoryIiiName">/{{ form.categoryIiiName }}</text>
				</view>
			</view>
			<view class="attribute-item">
				<view class="label">
					规格
				</view>
				<view class="misc">
					{{ form.specification }}
				</view>
			</view>
			<view class="attribute-item" v-for="(item,index) in form.detailAttribute" :key="index">
				<view class="label">
					{{ item.name }}
				</view>
				<view class="misc">
					{{ item.value }}
				</view>
			</view>
			<view class="attribute-item">
				<view class="label">
					简介
				</view>
				<view class="misc">
					{{ form.productIntro }}
				</view>
			</view>
		</view>

		<view class="module-wrapper">
			<view class="title-wrapper">
				<image class="icon"
					src="https://cdpresources.hobon.cc/procurement-mini-program/static/product-icon3.png" mode="">
				</image>
				<text class="title">近7日净单价走势</text>
			</view>
			<view class="chart-wrapper">
				<qiun-data-charts type="line" :opts="opts" :canvas2d="true" :chartData="chartData" />
			</view>
		</view>

		<view class="module-wrapper" v-if="form.testReportImage">
			<view class="title-wrapper">
				<image class="icon"
					src="https://cdpresources.hobon.cc/procurement-mini-program/static/product-icon1.png" mode="">
				</image>
				<text class="title">检测报告&承诺合格达标证</text>
			</view>
			<view class="report-image-list">
				<image @click="openTestReport(index)" v-for="(item,index) in form.testReportImage" :key="index"
					:src="item" mode="widthFix" class="report-image"></image>
			</view>
		</view>

		<view class="block">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imagelist: [],
				form: {},
				menuButtonInfo: {},
				chartData: {},
				productData: {},
				visible: false,
				opts: {
					color: ["#FE464B"],
					padding: [15, 10, 0, 10],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						disableGrid: true,
						show: false,
						gridType: "dash",
						dashLength: 2,
						showTitle: true,
						data: [{
							title: '元/斤',
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
							linearType: "custom",
							onShadow: true,
							animation: "horizontal"
						}
					}
				},
			}
		},
		onLoad(option) {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.getServerData(option.id)
		},
		computed: {
			cartNumber() {
				return this.$store.state.cartNumber
			}
		},
		methods: {
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						uni.showToast({
							title: '已复制！',
							icon: 'none'
						})
					}
				})
			},
			async getServerData(id) {
				const data = await this.$api.get('/app/product/anonymous/getInfo', {
					id: id
				})
				if (data.code === 200) {
					const form = data.data;
					const cartData = this.$store.state.cartData;
					form.productImage =
						"https://cdpresources.hobon.cc/supplier-mini-program/static/noProduct.png";
					if (form.mainImageVideo) {
						this.imagelist = JSON.parse(form.mainImageVideo)
						const mainImageVideo = this.imagelist[0]
						if (mainImageVideo.type === 0) {
							form.productImage = mainImageVideo.url + '?imageView2/3/w/300/q/100'
						} else {
							form.productImage = mainImageVideo.url + '?vframe/jpg/offset/1'
						}
					}
					if (form.detailAttribute) {
						form.detailAttribute = JSON.parse(form.detailAttribute)
					}
					form.inventory = form.supply - form.sold;
					form.salesVolume = parseInt(form.initialVolume || 0) + parseInt(form.realVolume ||
						0)
					form.labelList.sort((a, b) => a.sortNum - b.sortNum)
					form.labelList.forEach(item => {
						if (!form.labelImage && item.labelImage) {
							form.labelImage = item.labelImage;
						}
					})
					if (form.testReportImage) {
						form.testReportImage = JSON.parse(form.testReportImage)
					}
					this.form = form;
				}

				const chartData = await this.$api.get('/app/pricesupply/anonymous/recentPriceTrend', {
					productId: id
				})
				if (chartData.code === 200) {
					let xData = [];
					let yData = [];
					for (let item in chartData.data) {
						yData.push(chartData.data[item])
						xData.push(item.substring(5))
					}
					let res = {
						categories: xData,
						series: [{
							data: yData,
							// setShadow: [
							// 	0,
							// 	0,
							// 	10,
							// 	"#FE464B"
							// ],
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
					uni.hideLoading()
				}
			},
			openVideo(url) {
				uni.navigateTo({
					url: '/pages/common/openVideo?url=' + url
				})
			},
			goCart() {
				uni.switchTab({
					url: '/pages/cart/index',
					success: async () => {},
				});
			},
			addCart() {
				//this.productData = item;
				this.visible = true;
			},
			closeKeyboard(data) {
				if (data) {
					this.form.number = data;
					if (data > 0) {
						this.$store.commit('addCartList', this.form)
					} else {
						this.$store.commit('removeCartList', this.form)
					}
				}
				this.visible = false;
			},
			goBack() {
				uni.navigateBack({
					fail: () => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})
			},
			openPic(index) {
				let images = this.imagelist.map(item => {
					let url = item.url;
					if (item.type === 1) {
						url += "?vframe/jpg/offset/1"
					}
					return url
				})
				uni.previewImage({
					urls: images,
					current: index
				})
			},
			openTestReport(index) {
				uni.previewImage({
					urls: this.form.testReportImage,
					current: index
				})
			},
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.productDetail {
		height: 100%;
		overflow: auto;
		//padding-bottom: 160upx;

		.back {
			width: 70upx;
			height: 70upx;
			border-radius: 17upx;
			background-color: rgba(0, 0, 0, .6);
			position: absolute;
			left: 42upx;
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
				font-weight: bold;
			}
		}

		.banner-box {
			position: relative;
			width: 100%;
			height: 744upx;
		}

		.label-img {
			position: absolute;
			left: 50rpx;
			top: 50rpx;
			width: 100rpx;
			height: 100rpx;
			z-index: 9;
		}

		.banner-wrapper {
			width: 100%;
			height: 744upx;
			position: relative;

			.banner {
				width: 100%;
				height: 744upx;
			}

			.playImage {
				width: 100upx;
				height: 100upx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 1;
			}
		}

		.base-info-wrapper {
			margin: 24upx;
			background-color: #fff;
			border-radius: 20upx;
			padding: 24upx;

			.price-wrapper {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32upx;
				color: #525750;

				.price {
					color: #F93C21;
					font-size: 28upx;
					vertical-align: bottom;

					.number {
						font-size: 48upx;
						font-weight: bold;
					}

					.unit {
						position: relative;
						top: -4upx;
					}
				}

				.inventory {
					display: flex;
					align-items: center;

					.line {
						margin: 0 20rpx;
						height: 30rpx;
						width: 2rpx;
						background-color: #999999;
					}
				}
			}

			.inventory-wrapper {
				flex: 1;
				justify-content: flex-end;
				text-align: right;

				.inventory {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					font-size: 28rpx;

					.line {
						margin: 0 20rpx;
						height: 30rpx;
						width: 2rpx;
						background-color: #999999;
					}

					.volume {
						color: #F93C21;
						margin: 0 4rpx;
					}
				}

				.aftersale-volume {
					font-size: 22rpx;
					border: 1upx solid #ff6a00;
					padding: 0 10rpx;
					display: inline-block;
					color: #ff6a00;
					border-radius: 5rpx;
					margin-top: 10rpx;
				}
			}

			.product-title {
				font-size: 36upx;
				margin: 20upx 0;
			}

			.moq-wrapper {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.tag {
					font-size: 22rpx;
					border: 1rpx solid #1DB000;
					color: #1DB000;
					border-radius: 5rpx;
					padding: 1rpx 10rpx;
					margin-right: 20rpx;
				}
			}

			.spec-wrapper {
				border-radius: 20upx;
				background-color: #F5F9F8;
				display: flex;
				align-items: center;
				padding: 30upx 0;

				.spec-item {
					flex: 1;
					display: flex;
					height: 76upx;
					align-items: center;

					&:first-child {
						border-right: 2upx solid #D4D9D6;
					}

					.item {
						&:first-child {
							width: 36%;
							padding-left: 30upx;
						}

						.label {
							font-size: 28upx;
							line-height: 28upx;
							color: #333333;
						}

						.value {
							line-height: 24upx;
							font-size: 24upx;
							margin-top: 14upx;
							color: #F26022;
						}
					}
				}
			}

			.label-wrapper {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.label-item {
					padding: 0rpx 15rpx;
					margin-top: 15rpx;
					font-size: 24upx;
					color: #0D8EFF;
					border: 1rpx solid #0D8EFF;
					background-color: #0D8EFF22;
					margin-right: 15rpx;
					border-radius: 5rpx;
					height: 34rpx;
					line-height: 34rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.module-wrapper {
			border-radius: 20upx;
			background-color: #ffffff;
			margin: 0 24upx 24upx 24upx;
			padding: 30upx 30upx;

			.title-wrapper {
				display: flex;
				align-items: center;
				font-size: 36upx;

				.icon {
					width: 38upx;
					height: 38upx;
					margin-right: 10upx;
				}
			}

			.afterSale-item {
				margin-top: 30upx;
				font-size: 30upx;

				.label {
					color: #F26022;
				}

				.misc {
					font-size: 28upx;
					margin-top: 10upx;
					color: #525750;
				}

				&.tip {
					.label {
						color: #F26022;
						margin-bottom: 10rpx;
						font-size: 28rpx;

						// &:first-child {
						// 	margin-bottom: 5rpx;
						// }
					}
				}
			}

			.attribute-item {
				margin-top: 30upx;
				display: flex;
				align-items: center;
				font-size: 30upx;

				.label {
					color: #808080;
					margin-right: 20upx;
					white-space: nowrap;
				}

				.misc {
					color: #525750;
				}
			}

			.chart-wrapper {
				margin-top: 30upx;
				position: relative;
			}

			.report-image-list {
				margin-top: 30rpx;

				.report-image {
					width: 100%;
					margin-bottom: 20rpx;
				}
			}
		}

		.block {
			width: 100%;
			height: 160upx;
		}

		.bottom-wrapper {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 136upx;
			display: flex;
			align-items: center;
			background-color: #ffffff;
			box-shadow: 0 0 10upx #e1e1e1;

			.cart-wrapper {
				width: 160upx;
				display: flex;
				align-items: center;
				justify-content: center;

				.cart-icon {
					width: 58upx;
					height: 58upx;
				}
			}

			.submit-btn {
				margin-right: 24upx;
				flex: 1;
				height: 88upx;
				border-radius: 14upx;
				background-color: #F26022;
				color: #fff;
				font-size: 34upx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>